<h2>Why is this an issue?</h2>
<p>React components should not be nested, as their state will be lost on each re-render of their parent component, possibly introducing bugs. This
will also impact performance as child components will be recreated unnecessarily.</p>
<p>If the goal is to have the state reset, use a <a
href="https://react.dev/learn/preserving-and-resetting-state#option-2-resetting-state-with-a-key"><code>key</code></a> instead of relying on a parent
state.</p>
<pre>
function Component() {
  function NestedComponent() { // Noncompliant: NestedComponent should be moved outside Component
    return &lt;div /&gt;;
  }

  return (
    &lt;div&gt;
      &lt;NestedComponent /&gt;
    &lt;/div&gt;
  );
}
</pre>
<pre>
function Component() {
  return (
    &lt;div&gt;
      &lt;OtherComponent footer={ () =&gt; &lt;div /&gt; } /&gt; { /* Noncompliant: Component is created inside prop */ }
    &lt;/div&gt;
  );
}
</pre>
<pre>
class Component extends React.Component {
  render() {
    function UnstableNestedComponent() { // Noncompliant: NestedComponent should be moved outside Component
      return &lt;div /&gt;;
    }

    return (
      &lt;div&gt;
        &lt;UnstableNestedComponent /&gt;
      &lt;/div&gt;
    );
  }
}
</pre>
<p>You should refactor your code to define a component independently, passing props if needed.</p>
<pre>
function OutsideComponent(props) {
  return &lt;div /&gt;;
}

function Component() {
  return (
    &lt;div&gt;
      &lt;OutsideComponent /&gt;
    &lt;/div&gt;
  );
}
</pre>
<pre>
function Component() {
  return &lt;OtherComponent footer={ &lt;div /&gt; } /&gt;;
}
</pre>
<pre>
class Component extends React.Component {
  render() {
    return (
      &lt;div&gt;
        &lt;OtherComponent /&gt;
      &lt;/div&gt;
    );
  }
}
</pre>
<p>Component creation is allowed inside component props only if prop name starts with <code>render</code>. Make sure you are calling the prop in the
receiving component and not using it as an element.</p>
<pre>
function OtherComponent(props) {
  return &lt;div&gt;{props.renderFooter()}&lt;/div&gt;;
}

function Component() {
  return (
    &lt;div&gt;
      &lt;OtherComponent renderFooter={() =&gt; &lt;div /&gt;} /&gt;
    &lt;/div&gt;
  );
}
</pre>
<h2>Resources</h2>
<h3>Documentation</h3>
<ul>
  <li> <a href="https://github.com/jsx-eslint/eslint-plugin-react">eslint-plugin-react</a> - Rule <a
  href="https://github.com/jsx-eslint/eslint-plugin-react/blob/HEAD/docs/rules/no-unstable-nested-components.md">no-unstable-nested-components</a>
  </li>
  <li> <a href="https://reactjs.org/docs/reconciliation.html#elements-of-different-types">React Documentation - Elements Of Different Types</a> </li>
  <li> <a href="https://react.dev/learn/preserving-and-resetting-state#option-2-resetting-state-with-a-key">React Documentation - Resetting state with
  a key</a> </li>
</ul>
